<template>
    <div class="history-tab">
        <el-tabs trigger="hover" class="el-dropdown-link" ref="profile"  @tab-click="onTabClick"  :active-name="activeName" type="card" editable @edit="handleTabsEdit">
            <ul id="dropdown-menu" style="display: none;" class="el-dropdown-menu">
              <li class="el-dropdown-menu__item" val="0">关闭右侧标签</li>
              <li class="el-dropdown-menu__item" val="1">关闭其他标签</li>
            </ul>            
            <el-tab-pane :key="route.path" v-for="(route, id) in historyRoutes" :label="route.name" :path="route.path" :name="route.path"></el-tab-pane>
        </el-tabs>
    </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      menuItem: ["关闭右侧标签", "关闭其他标签 "]
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters(["historyRoutes", "activeName"])
  },
  methods: {
    ...mapActions(["deleteHistoryRoute"]),
    init() {
      const self = this;
      function getpos(ev) {
        var scrolltop =
          document.documentElement.scrollTop || document.body.scrollTop;
        var scrollleft =
          document.documentElement.scrollLeft || document.body.scrollLeft;
        return { x: ev.clientX + scrollleft, y: ev.clientY + scrolltop };
      }

      function delRouteFn(arr, tabs) {
        //删除元素
        arr.forEach((tab, index) => {
          delete tabs[tab];
        });
        //取最后一个元素来切换路由
        let activeName = Object.keys(tabs).pop();
        //切换路由
        self.$router.replace(tabs[activeName]);
        //存入历史记录
        sessionStorage.setItem("HISTORY_ROUTES", JSON.stringify(tabs));
        self.deleteHistoryRoute({ tabs, activeName });
      }

      function deleHandle(arryText, text, tabs, aspect) {
        if (aspect === "right") {
          //正式删除右侧元素
          delRouteFn(arryText, tabs);
        } else {
          let tabsArry = Object.keys(tabs);
          //差集
          let differenceSet = new Set(
            [...new Set(tabsArry)].filter(x => !new Set(arryText).has(x))
          );
          delRouteFn(differenceSet, tabs);
        }
      }

      function whereIsIndex(text, doing) {
        let tabs = JSON.parse(sessionStorage.getItem("HISTORY_ROUTES"));
        //点击项是在当前页面的左边还是右边
        let isActiveKeyRightOrLeft = false;

        //找到对应的key值
        for(var item in tabs){
            if(tabs[item].name===text){
                text = tabs[item].path
            }
        }

        let objKeysTabs = Object.keys(tabs);
        let arryIndex = 0;
        let arryText = ["/"];
        //关闭右侧标签
        if (doing == 0) {
          objKeysTabs.forEach((tab, index) => {
            if (text == tab) {
              arryIndex = index;
              arryText = objKeysTabs.slice(index + 1);
            }
          });
          deleHandle(arryText, text, tabs, "right");
        } else {
          //关闭其他
          arryText.push(text);
          deleHandle(arryText, text, tabs, "other");
        }
      }
      var dropdiwnMenu = document.getElementById("dropdown-menu");
      let elTabsNav = this.$refs.profile.$vnode.elm.getElementsByClassName(
        "el-tabs__nav"
      )[0];
      elTabsNav.oncontextmenu = function(ev) {
        ev.preventDefault();
        var eventr = ev || event;
        var pos = getpos(eventr);
        dropdiwnMenu.style.top = pos.y + "px";
        dropdiwnMenu.style.left = pos.x + "px";

        dropdiwnMenu.style["display"] = "block";
        dropdiwnMenu.style.webkitTransform = "transition-delay: 2s";
        //当前点击的
        let innerText = ev.target.innerText;
        sessionStorage.setItem("CURRENT_CLICK", innerText);
        return false; //阻止系统自带的菜单
      };
      document.onclick = function() {
        dropdiwnMenu.style["display"] = "none";
      };
      dropdiwnMenu.onclick = function(e) {
        let val = e.target.getAttribute("val");
        let innerText = sessionStorage.getItem("CURRENT_CLICK");
        
        whereIsIndex(innerText, val);
      };
    },
    onTabClick: function(tab) {
      let route = this.historyRoutes[tab.name];
      this.$router.replace(route);
    },
    handleTabsEdit(targetName, action) {
      let tabs = JSON.parse(sessionStorage.getItem("HISTORY_ROUTES"));
      let activeName = this.activeName;
      let objKeysTabs = Object.keys(tabs);
      if (activeName === targetName) {
        objKeysTabs.forEach((tab, index) => {
          //用中括号有计算着一层含义在
          if (tabs[tab].path === targetName) {
            let nextTab = objKeysTabs[index + 1] || objKeysTabs[index - 1];
            if (nextTab) {
              activeName = tabs[nextTab].path;
            }
          }
        });
      }
      //删除元素
      delete tabs[targetName];
      //切换路由
      this.$router.replace(tabs[activeName]);
      //存入历史记录
      sessionStorage.setItem("HISTORY_ROUTES", JSON.stringify(tabs));
      this.deleteHistoryRoute({ tabs, activeName });
    }
  }
};
</script>



<style lang='scss' scoped>
.history-tab {
  background-color: #fff;
  margin-bottom: 10px;
  .el-tabs__content {
    overflow: inherit;
    position: static;
  }
}
</style>
